<template>
  <business-layout>
    <div style='height: 100%;'>
      <div style='height: 50%;width: 100%;'>
        <a-row style='height: 40px;'>
          <a-form :form='form' layout='inline' @submit='handleQueryData'>
            <a-form-item label=''>
              <a-date-picker
                v-decorator="['startTime']"
                valueFormat='YYYY-MM-DD 00:00:00'
                format='YYYY-MM-DD 00:00:00'
                :disabled-date='startDisabledDate'
                placeholder='请选择开始时间' />
            </a-form-item>
            <a-form-item label=''>
              <a-date-picker
                v-decorator="['endTime']"
                :disabled-date='endDisabledDate'
                format='YYYY-MM-DD 23:59:59'
                valueFormat='YYYY-MM-DD 23:59:59'
                placeholder='请选择结束时间' />
            </a-form-item>
            <a-form-item>
              <a-button type='primary' html-type='submit'>
                <a-icon type='search' />
                查询
              </a-button>
            </a-form-item>
          </a-form>
        </a-row>
        <a-row style='height: calc(100% - 40px);width: 100%;'>
          <a-col :span='24' style='height: 100%;width: 100%;'>
            <bar-chart
              multiple
              id='bar'
              v-show='xData.length'
              :legendList='legendList'
              :loading='barSpinning'
              height='100%'
              width='100%'
              :x-data='xData'
              :y-data='yData'
            />
            <a-empty v-show='!xData.length' style='height: 100%' />
          </a-col>
        </a-row>
      </div>

      <div style='height: 50%;width: 100%;'>
        <a-row style='height: calc(100% - 50px)'>
          <a-col :span='24' style='height: 100%;'>
            <s-table
              ref='table'
              size='default'
              rowKey='key'
              :columns='columns'
              :data='loadData'
              :showPagination='false'
            >
            <span slot='serial' slot-scope='text, record, index'>
              {{ index + 1 }}
            </span>
              <span slot='action' slot-scope='text, record'>
            </span>
            </s-table>
          </a-col>
        </a-row>
      </div>
    </div>
  </business-layout>
</template>

<script>
import { LineChart, BarChart } from '@/business-components/charts'
import { STable, Ellipsis } from '@/components'
import { workOrderStatistics } from '@/api/workerOrder'
import moment from 'moment/moment'

const columns = [
  {
    title: '序号',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '用户姓名',
    dataIndex: 'userName'
  },
  {
    title: '发布工单数',
    dataIndex: 'createdCount'
  },
  {
    title: '处理工单数',
    dataIndex: 'handledCount'
  },
  {
    title: '完成工单数',
    dataIndex: 'completedCount'
  },
  {
    title: '总处理时长',
    dataIndex: 'totalTime'
  }
]
export default {
  name: 'HistoryTime',
  mixins: [],
  components: {
    LineChart,
    BarChart,
    STable,
    Ellipsis
    // CreateChart
  },
  props: {},
  watch: {
    charData: {
      handler (val) {
        if (val) {
          this.xData = val.map(item => item.userName)
          this.yData = [
            val.map(item => item.createdCount),
            val.map(item => item.handledCount),
            val.map(item => item.completedCount),
            val.map(item => item.totalTime)
          ]
        }
      },
      deep: true
    }
  },
  computed: {},
  data () {
    this.columns = columns
    return {
      form: this.$form.createForm(this),
      barSpinning: true,
      xData: [],
      yData: [],
      charData: [],
      mdl: null,
      legendList: [
        { name: '发布工单数' },
        { name: '处理的工单数' },
        { name: '完成的工单数' },
        { name: '总处理时长' }
      ],
      loadData: parameter => {
        this.barSpinning = true
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return workOrderStatistics(requestParameters).then(res => {
          this.charData = res
          return {
            endRow: 10,
            hasNextPage: false,
            hasPreviousPage: false,
            isFirstPage: false,
            isLastPage: false,
            list: res,
            navigateFirstPage: 0,
            navigateLastPage: 0,
            navigatePages: 0,
            navigatepageNums: null,
            nextPage: 0,
            pageNum: 1,
            pageSize: 10,
            pages: 3,
            prePage: 0,
            size: 10,
            startRow: 0,
            total: 1
          }
        }).finally(() => {
          this.barSpinning = false
        })
      },
      confirmLoading: false
    }
  },
  created () {
  },
  methods: {
    moment,
    startDisabledDate(startValue) {
      const endValue = this.form.getFieldValue('endTime')
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue).valueOf()
    },
    endDisabledDate(endValue) {
      const startValue = this.form.getFieldValue('startTime')
      if (!startValue || !endValue) {
        return false
      }
      return moment(startValue).valueOf() >= endValue.valueOf()
    },
    handleQueryData (e) {
      e.preventDefault()
      const form = this.form
      const that = this
      const queryObj = {}
      form.validateFields((error, values) => {
        Object.keys(values).forEach(key => {
          if (values[key]) {
            queryObj[key] = values[key]
          }
        })
        this.queryParam = queryObj
        that.$refs.table.refresh()
      })
    }
  },
  mounted () {
  },
  updated () {
  },
  destroyed () {
  }
}
</script>
<style lang='less' scoped>
.chart-title {
  font-size: 24px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  color: #4470D8;
  line-height: 32px;
}
</style>
